<template>
  <view class="category">
    <view class="wrap">
      <template>
        <view class="wrap-title">抓鸭生产计划排序</view>
        <view @click="showDateFn('duck')" class="flex wrap-box">
          <view class="flex wrap-box-t">
            <text>
              {{ showDateTitleProduct }}
            </text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="">
          <zb-table
            :show-header="true"
            :columns="column1"
            :border="true"
            :flt="true"
            :data="tableData1"></zb-table>
          <uni-pagination
            title="标题文字"
            :current="page1"
            @change="pageBtn1"
            :total="total1"></uni-pagination>
        </view>
      </template>
      <template v-if="showList.produce_statistics">
        <view class="wrap-title">生产实时排序表</view>
        <view @click="showDateFn('product')" class="flex wrap-box">
          <view class="flex wrap-box-t">
            <text>
              {{ showDateTitle }}
            </text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="">
          <zb-table
            :show-header="true"
            :columns="column"
            :border="true"
            :flt="true"
            :data="tableData"></zb-table>
          <uni-pagination
            title="标题文字"
            :current="page"
            @change="pageBtn"
            :total="total"></uni-pagination>
        </view>
      </template>
      <template v-if="showList.produce_control">
        <view class="wrap-title">养殖生管部</view>
        <view
          @click="
            showTime = true;
            timeClickIndex = 0;
          "
          class="flex wrap-box">
          <view class="flex wrap-box-t">
            <text>
              {{
                viewInfoQueryObj.type
                  ? dateArr[viewInfoQueryObj.type - 1]
                  : "近1年"
              }}
            </text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
          <view class="">{{ topTime }}</view>
        </view>
        <view class="wrap-des flex-between">
          <view @click="farmerBtn(0)" class="flex">
            <text>养殖户：{{ farmObj.name }}</text>
            <image
              src="/static/order/d.png"
              mode="aspectFit"
              class="d-icon"></image>
          </view>
          <view class="">
            放苗次数：{{ chartsOneData.seeding_count || "" }}
          </view>
          <view class="">
            总放苗量：{{ chartsOneData.seeding_number || "" }}
          </view>
        </view>
        <!-- 折线图 -->
        <view class="e-wrap">
          <!--  <qiun-data-charts
          style="height: 800px"
          type="line"
          :opts="opts"
          :chartData="chartData" /> -->
          <uni-ec-canvas
            class="uni-ec-canvas"
            id="uni-ec-canvas"
            ref="canvas"
            canvas-id="uni-ec-canvas"
            :force-use-old-canvas="false"></uni-ec-canvas>
        </view>
      </template>
      <template v-if="showList.duck_cake">
        <view class="wrap-title">副品鸭数据分析饼图</view>
        <view
          @click="
            showTime = true;
            timeClickIndex = 1;
          "
          class="flex wrap-box">
          <view class="flex wrap-box-t">
            <text>{{ dateArr[viewInfoQueryObj1.type - 1] }}</text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
          <view class="">{{ topTime1 }}</view>
        </view>
        <view class="flex-center">
          <view class="left">
            <uni-ec-canvas
              class="uni-ec-canvas"
              id="uni-ec-canvas1"
              ref="canvas1"
              canvas-id="uni-ec-canvas1"
              :force-use-old-canvas="false"></uni-ec-canvas>
          </view>
          <!-- <view class="right">
					<view
						class="box flex-between"
						v-for="(item, index) in chartsTwoData.one"
						:key="index">
						<view
							:style="{ background: opts1.color[index] }"></view>
						<view class="flex1">{{ item.name }}</view>
						<view class="">{{ item.value }}</view>
					</view>
				</view> -->
        </view>

        <view class="box-title borderb">今日副品项占比</view>
        <view class="flex-center">
          <view class="left">
            <!-- <qiun-data-charts type="rose" :opts="opts1" :chartData="chartData1" /> -->
            <uni-ec-canvas
              class="uni-ec-canvas"
              id="uni-ec-canvas2"
              ref="canvas2"
              canvas-id="uni-ec-canvas2"
              :force-use-old-canvas="false"></uni-ec-canvas>
          </view>
          <!-- 	<view class="right">
					<view
						class="box flex-between"
						v-for="(item, index) in chartsTwoData.two"
						:key="index">
						<view
							:style="{ background: opts1.color[index] }"></view>
						<view class="flex1">{{ item.name }}</view>
						<view class="">{{ item.value }}</view>
					</view>
				</view> -->
        </view>
        <view class="box-title borderb">今日副品类别占比</view>
      </template>
      <template v-if="showList.duck_cake_disabled">
        <view
          @click="
            showTime = true;
            timeClickIndex = 2;
          "
          class="flex wrap-box">
          <view class="flex wrap-box-t">
            <text>{{ dateArr[viewInfoQueryObj2.type - 1] }}</text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
          <view class="">{{ topTime2 }}</view>
        </view>
        <view class="flex box-flex borderb">
          <view class="w102">养殖户</view>
          <view class="w72">副品率</view>
          <view class="flex1 flex tr">
            <view class="">排序方式</view>
            <image
              src="/static/category/2.png"
              mode="aspectFit"
              class="s-img"></image>
          </view>
        </view>
        <view class="flex box-flex nopb" v-for="item in chartsThreeData">
          <!-- @click="farmerBtn(1)" -->
          <view class="w102">
            {{ item.farmer_title }}
          </view>
          <view class="w72">{{ item.proportion + "%" }}</view>
          <view class="flex1">
            <!-- <u-line-progress
            :show-percent="true"
            active-color="#4D81EB"
            :percent="item.proportion"></u-line-progress> -->
            <u-line-progress
              :percentage="item.proportion"
              activeColor="#4D81EB"></u-line-progress>
          </view>
        </view>
        <view class="box-title">养殖户副品率排序</view>
      </template>
    </view>
    <!-- 最后图 -->
    <view class="wrap" v-if="showList.quality_control">
      <view class="wrap-title">质量管理</view>
      <view class="flex wrap-box">
        <view
          class="flex wrap-box quality-class"
          @click="
            showTime = true;
            timeClickIndex = 3;
          ">
          <view class="flex wrap-box-t">
            <text>{{ dateArr[viewInfoQueryObj3.type - 1] }}</text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
          <view class="">{{ topTime3 }}</view>
        </view>
        <view class="flex wrap-box quality-class">
          <view class="flex wrap-box-t" @click="typeArrShow = true">
            <text>工段</text>
            <image src="/static/order/d.png" mode="aspectFit"></image>
          </view>
          <view>{{ typeObj.name }}</view>
        </view>
      </view>
      <view class="e-wrap">
        <uni-ec-canvas
          class="uni-ec-canvas"
          id="uni-ec-canvas3"
          ref="canvas3"
          canvas-id="uni-ec-canvas3"
          :force-use-old-canvas="false"></uni-ec-canvas>
      </view>
      <view class="box-title">月不良趋势图</view>
      <view class="e-wrap">
        <uni-ec-canvas
          class="uni-ec-canvas"
          id="uni-ec-canvas4"
          ref="canvas4"
          canvas-id="uni-ec-canvas4"
          :force-use-old-canvas="false"></uni-ec-canvas>
      </view>
      <view class="box-title">累计不良项柏拉图</view>
    </view>
    <!-- 日历弹框 -->
    <pop_time
      @confirmDate="confirm"
      @tiemCheck="tiemCheck"
      @closeTime="showTime = false"
      :showTime="showTime"
      :isOther="true"
      :mode="mode" />
    <!-- 中间商、养殖户 -->
    <u-picker
      @cancel="() => (showFarmer = false)"
      @confirm="confirmPicker"
      :show="showFarmer"
      confirmColor="#DA4334"
      :columns="farmerList"
      keyName="title"></u-picker>
    <!-- 工段 -->
    <u-picker
      @cancel="() => (typeArrShow = false)"
      @confirm="confirmTypePicker"
      :show="typeArrShow"
      confirmColor="#DA4334"
      :columns="typeArr"
      keyName="name"></u-picker>
    <u-calendar
      :show="showDate"
      color="#DA4334"
      mode="single"
      :maxDate="maxDate"
      :minDate="minDate"
      :month-num="12"
      :defaultDate="defaultDate"
      @close="() => (showDate = false)"
      @confirm="confirmDateSort"></u-calendar>
  </view>
</template>

<script>
import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas";
import * as echarts from "@/components/uni-ec-canvas/echarts.js";
import pop_time from "../../components/order/pop_time.vue";
import utils from "../../plugin/util.js";
let chart = null;
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
const maxDate = new Date(year + 1, 0, 0).getTime();
const minDate = new Date(year, 0, 1).getTime();
const defaultDate = [`${year}-${month}-${date}`];
const monthNum = (year - 2022 + 1) * 12;
export default {
  components: { uniEcCanvas, pop_time },
  data() {
    return {
      maxDate,
      minDate,
      defaultDate,
      showDateTitleProduct: `${year}-${month}-${date}`,
      monthNum,
      showDate: false,
      showDateTitle: `${year}-${month}-${date}`,
      chartsOneData: {},
      showTime: false,
      ec: {
        options: {}, //echart 配置项
        lazyLoad: true,
      },
      column: [],
      column1: [],
      tableData: [],
      farmerList: [],
      showFarmer: false,
      timeClickIndex: 0,
      dateArr: [
        "近一年",
        "本周",
        "本月",
        "近7天",
        "近30天",
        "近90天",
        "近180天",
        "时间",
      ],
      farmObj: {
        name: "",
        id: "",
      },
      mgtList: [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" },
        { value: 28, name: "rose 5" },
        { value: 26, name: "rose 6" },
        { value: 22, name: "rose 7" },
        { value: 18, name: "rose 8" },
      ],
      viewInfoQueryObj: {
        type: "1",
        start_time: `${new Date().getFullYear()}` + "-" + "01-01",
        end_time: `${new Date().getFullYear()}` + "-" + "12-12",
      },
      viewInfoQueryObj1: {
        type: "1",
        start_time: `${new Date().getFullYear()}` + "-" + "01-01",
        end_time: `${new Date().getFullYear()}` + "-" + "12-12",
      },
      viewInfoQueryObj2: {
        type: "1",
      },
      viewInfoQueryObj3: {
        type: "1",
        quality_type: "",
      },
      typeArrShow: false,
      typeArr: [
        [
          { name: "一工段", value: "11" },
          { name: "二工段", value: "12" },
          { name: "三工段", value: "13" },
          { name: "四工段", value: "14" },
          { name: "副产车间", value: "15" },
          { name: "五工段", value: "16" },
        ],
      ],
      showList: {},
      typeObj: {
        name: "",
        id: "",
      },
      chartsFourData: [],
      topTime:
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "01-01")
        ) +
        "-" +
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "12-31")
        ),
      topTime1:
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "01-01")
        ) +
        "-" +
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "12-31")
        ),
      topTime2:
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "01-01")
        ) +
        "-" +
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "12-31")
        ),
      topTime3:
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "01-01")
        ) +
        "-" +
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "12-31")
        ),
      topTime3:
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "01-01")
        ) +
        "-" +
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "12-31")
        ),
      chartsTwoData: {},
      chartsThreeData: [],
      chartsFourData2: {},
      page: 1,
      total: 0,
      tableData1: [],
      page1: 1,
      total1: 0,
      saveIndex: 0,
      productType: "",
    };
  },
  async created() {
    await this.getFarmer();
    // 获取抓鸭生产计划表格
    this.getCatchDuckProductionLogStatistics();

    this.getShowType();
    // this.getSort();
    // this.materialDifference();
    // this.getChartsTwoData();
    // this.getChartsThreeData();
    // this.getChartsFourData();
    // this.getChartsFourData2();
  },
  onShow() {
    if (uni.getStorageSync("checkAddress")) {
      const obj = JSON.parse(uni.getStorageSync("checkAddress"));
      this.farmObj.name = obj.title;
      this.farmObj.id = obj.farmer_id;
      this.showFarmer = false;
      if (this.saveIndex == 0) {
        this.materialDifference();
      } else {
        this.getChartsThreeData();
      }
    }
  },
  methods: {
    getCatchDuckProductionLogStatistics() {
      this.$api({
        url: "/getCatchDuckProductionLogStatistics",
        method: "get",
        data: {
          page: this.page1,
          limit: "10",
          date: this.showDateTitleProduct,
        },
      }).then((res) => {
        this.tableData1 = res.data.data;
        this.total1 = res.data.count;
        this.column1 = [
          {
            name: "catch_duck_no",
            label: "序号",
            fixed: true,
            width: 120,
            align: "center",
            emptyString: "--",
          },
          {
            name: "num",
            label: "只数",
            sorter: false,
            align: "center",
          },
          {
            name: "specifications",
            label: "规格",
            align: "center",
          },
          {
            name: "planned_train_number",
            label: "计划车次",
            align: "center",
          },
        ];
      });
    },
    showDateFn(val) {
      this.productType = val;
      this.showDate = true;
    },
    confirmDateSort(e) {
      if (this.productType == "product") {
        this.showDateTitle = e[0];
        this.getSort();
      } else {
        this.showDateTitleProduct = e[0];
        this.getCatchDuckProductionLogStatistics();
      }
      this.showDate = false;
    },
    pageBtn(e) {
      this.page = e;
      this.getSort();
    },
    pageBtn1(e) {
      this.page1 = e;
      this.getCatchDuckProductionLogStatistics();
    },
    getSort() {
      this.$api({
        url: "/getCatchDuckTransportationStatistics",
        method: "get",
        data: {
          page: this.page,
          limit: "10",
          date: this.showDateTitle,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.count;
          this.column = [
            {
              name: "production_order",
              label: "实时生产顺序",
              fixed: true,
              width: 120,
              align: "center",
              emptyString: "--",
            },
            {
              name: "plate_number",
              label: "车牌号",
              sorter: false,
              align: "center",
            },
            {
              name: "farmer_name",
              label: "养殖户",
              align: "center",
            },
            {
              name: "specifications",
              label: "鸭规格",
              align: "center",
            },
            {
              name: "captain_name",
              label: "抓鸭队长",
              align: "center",
            },
          ];
        }
      });
    },
    confirmTypePicker({ value }) {
      this.typeObj = value[0];
      this.typeArrShow = false;
      this.getChartsFourData();
      this.getChartsFourData2();
    },
    getChartsFourData2() {
      this.$api({
        url: "/quality_controlStatistics_two",
        data: {
          type: this.viewInfoQueryObj3.type,
          quality_type: this.typeObj.value,
        },
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.chartsFourData2 = res.data;
          this.$refs.canvas4.init(this.initChart4);
        }
      });
    },
    getChartsFourData() {
      this.$api({
        url: "/quality_controlStatistics",
        data: {
          type: this.viewInfoQueryObj3.type,
          quality_type: this.typeObj.value,
        },
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.chartsFourData = res.data;
          this.$refs.canvas3.init(this.initChart3);
        }
      });
    },
    farmerBtn(k) {
      // this.showFarmer = true;
      this.saveIndex = k;
      this.toRoute("/select-address?isyzh=1");
    },
    //权限展示模块
    getShowType() {
      this.$api({
        url: "/getUserRoleBySlug",
        method: "get",
        data: {
          type: "1",
          slug: "produce_statistics,produce_control,quality_control,duck_cake_disabled,duck_cake",
        },
      }).then((res) => {
        if (res?.code === 200) {
          this.showList = res.data;
          // this.showList = {
          // 	produce_statistics: true,
          // 	produce_control: true,
          // 	duck_cake: true,
          // 	duck_cake_disabled: true,
          // };
          // 策略模式配置（带错误隔离）
          const actionHandlers = {
            produce_statistics: () => this.getSort(),
            produce_control: () => this.materialDifference(),
            duck_cake_disabled: () => this.getChartsThreeData(),
            duck_cake: () => this.getChartsTwoData(),
            quality_control: () => {
              // 修正键名空格问题
              this.getChartsFourData();
              this.getChartsFourData2();
            },
          };

          // 数据处理管道优化（先过滤后映射）
          const validActions = Object.entries(res.data)
            .filter(([_, value]) => Boolean(value))
            .map(([name]) => ({
              name,
              handler: actionHandlers[name], // 提前绑定处理器
            }));

          // 批量执行（带性能监控）
          if (validActions.length) {
            validActions.forEach(({ name, handler }) => {
              try {
                const start = performance.now();
                handler?.();
                const duration = performance.now() - start;
                if (duration > 100) {
                  console.warn(
                    `[Performance] ${name} 执行耗时 ${duration.toFixed(2)}ms`
                  );
                }
              } catch (e) {
                console.log(`[Action Error] ${name}:`, e);
              }
            });
          }
        }
      });
    },
    getChartsThreeData() {
      this.$api({
        url: "/substandardgoods_proportion",
        data: {
          type: this.viewInfoQueryObj2.type,
          farmer_id: this.farmObj.id,
        },
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.chartsThreeData = res.data;
        }
      });
    },
    getChartsTwoData() {
      this.$api({
        url: "/section_four_white_bar_detail",
        data: {
          type: this.viewInfoQueryObj1.type,
        },
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.chartsTwoData = res.data;
          this.$refs.canvas1.init(this.initChart1);
          this.$refs.canvas2.init(this.initChart2);
        }
      });
    },
    materialDifference() {
      this.$api({
        url: "/materialDifference",
        data: {
          farmer_id: this.farmObj.id,
          ...this.viewInfoQueryObj,
        },
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.chartsOneData = res.data;
          this.$refs.canvas.init(this.initChart);
        }
      });
    },
    //获取养殖户列表
    getFarmer() {
      this.farmerList = [];
      return new Promise((resolve) => {
        this.$api({
          url: "/farmer_list",
          method: "get",
        }).then((res) => {
          if (res.code == 200) {
            this.farmObj.id = res.data.list[0].farmer_id;
            this.farmObj.name = res.data.list[0].title;
            this.farmerList.push(res.data.list);
            resolve();
          }
        });
      });
    },
    //日历弹框
    confirm({ e, data, index }) {
      switch (this.timeClickIndex) {
        case 0:
          this.viewInfoQueryObj.start_time = e[0];
          this.viewInfoQueryObj.end_time = e[e.length - 1];
          this.topTime = data;
          if (index == 7) {
            this.viewInfoQueryObj.type = index + 2;
          } else {
            this.viewInfoQueryObj.type = index + 1;
          }
          this.showTime = false;
          this.materialDifference();
        case 1:
          this.topTime1 = data;
          if (index == 7) {
            this.viewInfoQueryObj1.type = index + 2;
          } else {
            this.viewInfoQueryObj1.type = index + 1;
          }
          this.showTime = false;
          this.getChartsTwoData();
          break;
        case 2:
          this.topTime2 = data;
          console.log(this.topTime2, "this.topTime2");
          if (index == 7) {
            this.viewInfoQueryObj2.type = index + 2;
          } else {
            this.viewInfoQueryObj2.type = index + 1;
          }
          this.showTime = false;
          this.getChartsThreeData();
          break;
      }
    },
    tiemCheck({ k, data }) {
      console.log(k, "k");
      switch (this.timeClickIndex) {
        case 0:
          if (k == 7) {
            this.viewInfoQueryObj.type = k + 2;
          } else {
            this.viewInfoQueryObj.type = k + 1;
          }
          this.topTime = data;
          this.showTime = false;
          this.materialDifference();
          break;
        case 1:
          if (k == 7) {
            this.viewInfoQueryObj1.type = k + 2;
          } else {
            this.viewInfoQueryObj1.type = k + 1;
          }
          this.topTime1 = data;
          this.showTime = false;
          this.getChartsTwoData();
        case 2:
          if (k == 7) {
            this.viewInfoQueryObj2.type = k + 2;
          } else {
            this.viewInfoQueryObj2.type = k + 1;
          }
          this.topTime2 = data;
          this.showTime = false;
          this.getChartsThreeData();
          break;
        case 3:
          if (k == 7) {
            this.viewInfoQueryObj3.type = k + 2;
          } else {
            this.viewInfoQueryObj3.type = k + 1;
          }
          this.topTime3 = data;
          this.showTime = false;
          this.getChartsFourData();
          break;
      }
    },
    upxToPx(upx) {
      const windowWidth = uni.getSystemInfoSync().windowWidth; // 获取设备屏幕宽度
      return upx * (windowWidth / 750); // 转换公式
    },
    initChart(canvas, width, height, canvasDpr) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr,
      });
      canvas.setChart(chart);

      const option = {
        xAxis: {
          type: "category",
          data: this.chartsOneData.month,
          axisLabel: {
            interval: "0",
            rotate: 45, // 旋转45度
          },
        },
        yAxis: {
          type: "value",
          max: 1,
          axisLine: { show: false },
        },
        series: [
          {
            data: this.chartsOneData.value,
            type: "line",
            smooth: true,
            color: "#DA4334",
          },
        ],
      };
      chart.setOption(option);
      return chart;
    },
    initChart1(canvas, width, height, canvasDpr) {
      console.log("data----", canvas, width, height, canvasDpr);
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr,
      });
      canvas.setChart(chart);
      const option = {
        // color: [
        //   "#3B82F6",
        //   "#EF4444",
        //   "#FFB95A",
        //   "#84CC16",
        //   "#22C55E",
        //   "#1BC0C4",
        //   "#083684",
        //   "#8B5CF6",
        //   "#A855F7",
        //   "#6366F1",
        // ],
        legend: {
          orient: "vertical",
          left: "46%",
          icon: "circle",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [this.upxToPx(50), this.upxToPx(150)],
            center: ["24%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: false,
            data: this.chartsTwoData.one,
          },
        ],
      };
      chart.setOption(option);
      return chart;
    },
    initChart2(canvas, width, height, canvasDpr) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr,
      });
      canvas.setChart(chart);
      const option = {
        legend: {
          orient: "vertical",
          left: "46%",
          icon: "circle",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [this.upxToPx(50), this.upxToPx(150)],
            center: ["24%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: false,
            data: this.chartsTwoData.two,
          },
        ],
      };
      chart.setOption(option);
      return chart;
    },
    initChart3(canvas, width, height, canvasDpr) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr,
      });
      canvas.setChart(chart);

      const option = {
        xAxis: {
          type: "category",
          data: this.chartsFourData.month,
          axisLabel: {
            interval: "0",
            rotate: 45, // 旋转45度
          },
        },
        yAxis: {
          type: "value",
          max: 1,
          axisLine: { show: false },
        },
        series: [
          {
            data: this.chartsFourData.value,
            type: "line",
            smooth: true,
            color: "#DA4334",
          },
        ],
      };
      chart.setOption(option);
      return chart;
    },
    initChart4(canvas, width, height, canvasDpr) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr,
      });
      canvas.setChart(chart);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        legend: {
          show: false,
        },
        grid: {
          right: "13%",
        },
        xAxis: [
          {
            type: "category",
            data: this.chartsFourData2.title,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              // interval: "0",
              rotate: 45, // 旋转45度
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 100,
            interval: 20,
          },
          //右侧的y轴设置
          {
            type: "value",
            name: "",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
            },
            data: this.chartsFourData2.value,
          },

          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              show: false,
            },
            data: this.chartsFourData2.percentage,
          },
        ],
      };
      chart.setOption(option);
      return chart;
    },
  },
};
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 800px;
}

::v-deep .u-popup {
  flex: 0 !important;
}

::v-deep .u-textarea--disabled {
  background: #fff;
}

.e-wrap {
  width: 100%;
  height: 472upx;
  position: relative;
  z-index: 1;

  .uni-ec-canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
  }
}

.quality-class {
  view,
  text {
    word-break: keep-all;
  }

  .wrap-box-t > image {
    margin-left: 14rpx !important;
  }

  .wrap-box-t {
    margin-right: 10rpx !important;
  }
}

.category {
  width: 100%;
  height: 100%;
  background: #f5f7f9;
  padding: 20upx 0;
  box-sizing: border-box;

  .wrap {
    background: #fff;
    margin-bottom: 20upx;
    padding: 0 32upx;

    &-title {
      padding: 32upx 0 28upx;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      border-bottom: 1upx solid #f5f7f9;
    }

    &-box {
      padding: 24upx 2upx;
      font-size: 24rpx;
      color: #6f6e74;

      &-t {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        padding: 0 20upx 0 0;
        margin-right: 20upx;
        border-right: 1upx solid #d8d8d8;

        & > image {
          width: 16upx;
          height: 16upx;
          margin-left: 28upx;
        }
      }
    }

    &-des {
      padding: 28upx 0 30upx;
      font-size: 24rpx;
      color: #161616;
    }

    .d-icon {
      width: 12upx;
      height: 12upx;
      margin-left: 16upx;
    }
  }

  .left {
    width: 100vw;
    height: 440upx;
    margin-right: 32upx;
  }

  .right {
    width: 266upx;
    box-sizing: border-box;
    background: #f8f8f8;
    padding: 20upx 26upx 16upx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-right: 20upx;

    .box {
      font-size: 20rpx;
      color: #3d3d3d;
      margin-bottom: 16upx;

      & > view:nth-of-type(1) {
        width: 12upx;
        height: 12upx;
        border-radius: 50%;
      }

      & > view:nth-of-type(2) {
        margin-left: 12upx;
        margin-right: 28upx;
      }
    }

    .box:last-child {
      margin-bottom: 0;
    }
  }

  .box-title {
    font-size: 24rpx;
    color: #161616;
    padding: 32upx 0;
    text-align: center;
  }

  .box-flex {
    padding: 24upx 0;

    & > view {
      font-size: 24rpx;
      color: #3d3d3d;
    }

    .w102 {
      width: 102upx;
      margin-right: 10upx;
    }

    .w72 {
      width: 72upx;
      text-align: center;
      margin-right: 40upx;
    }

    .tr {
      justify-content: flex-end;
    }

    .s-img {
      width: 28upx;
      height: 28upx;
      margin-left: 6upx;
    }
  }

  .borderb {
    border-bottom: 1upx solid #e4e4e4;
  }

  .nopb {
    padding-bottom: 0;
  }
}
</style>
